<template>
  <div>
    <div id="bottomLeftChart" style="width:900px;height:500px;"></div>
  </div>
</template>

<script>
const echarts = require("echarts");
export default {
  props: ["listData"],
  watch: {
    listData(newValue) {
      
      this.comps = newValue;
      
      this.comps.forEach(element => {
        if(element.company==='天健评估') element.company='评估'
        if(element.company==='税务公司') element.company='税务'
        if(element.company==='财经公司') element.company='财经'
        if(element.company==='工程公司新疆') element.company='工程新疆'
         if(element.company==='厚成投资公司') element.company='厚成'
          if(element.company==='天健光华会计咨询') element.company='光华'
           if(element.company==='开元重庆') element.company='开元'
                      if(element.company==='工程公司四川') element.company='工程四川'

        this.invoes.push(element.account);
        this.compNames.push(element.company);
        this.costs.push(element.mony);
        this.retes.push((element.account / element.mony).toFixed(2));
      });
      this.drawPie();
    }
  },
  data() {
    return {
      invoes: [],
      costs: [],
      compNames: [],
      comps: [],
      retes: []
    };
  },
  mounted() {
    this.drawPie();
  },
  methods: {
    drawPie() {
      // 基于准备好的dom，初始化echarts实例
      let myChartPieLeft = echarts.init(
        document.getElementById("bottomLeftChart")
      );

      let option = {
        title: {
          text: "",
          x: "center",
          y: 0,
          textStyle: {
            color: "#B4B4B4",
            fontSize: 16,
            fontWeight: "normal"
          }
        },
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(255,255,255,0.1)",
          axisPointer: {
            type: "shadow",
            label: {
              show: true,
              backgroundColor: "#7B7DDC"
            }
          }
        },
        legend: {
          data: ["开票金额", "入账金额", "收入完成率"],
          textStyle: {
            color: "#B4B4B4"
          },
          top: "0%"
        },
        grid: {
          x: "10%",
          width: "88%",
          y: "4%"
        },
        xAxis: {
          data: this.compNames,
          axisLine: {
            lineStyle: {
              color: "#B4B4B4"
            }
          },
          axisTick: {
            show: false
          }
        },
        yAxis: [
          {
            splitLine: { show: false },
            axisLine: {
              lineStyle: {
                color: "#B4B4B4"
              }
            },

            axisLabel: {
              formatter: "{value} "
            }
          },
          {
            splitLine: { show: false },
            axisLine: {
              lineStyle: {
                color: "#B4B4B4"
              }
            },
            axisLabel: {
              formatter: "{value} "
            }
          }
        ],
        series: [
          {
            name: "收入完成率",
            type: "line",
            smooth: true,
            showAllSymbol: true,
            symbol: "emptyCircle",
            symbolSize: 8,
            yAxisIndex: 1,
            itemStyle: {
              normal: {
                color: "#F02FC2"
              }
            },
            data: this.retes
          },

          {
            name: "开票金额",
            type: "bar",
            barWidth: 10,
            itemStyle: {
              normal: {
                barBorderRadius: 5,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#956FD4" },
                  { offset: 1, color: "#3EACE5" }
                ])
              }
            },
            data: this.costs
          },

          {
            name: "入账金额",
            type: "bar",
           // barGap: "-100%",
            barWidth: 10,
            itemStyle: {
              normal: {
                barBorderRadius: 5,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "rgba(156,107,211,0.8)" },
                  { offset: 0.2, color: "rgba(156,107,211,0.5)" },
                  { offset: 1, color: "rgba(156,107,211,0.2)" }
                ])
              }
            },
           // z: -12,

            data: this.invoes
          }
        ]
      };
      myChartPieLeft.setOption(option);
      // -----------------------------------------------------------------
      // 响应式变化
      window.addEventListener("resize", () => myChartPieLeft.resize(), false);
    }
  },
  destroyed() {
    window.onresize = null;
  }
};
</script>

<style  scoped>
</style>